<template>
    <el-container>
        <el-aside width="220px">
            <ChfTree v-bind="treeConfig" ref="tree">
                <!-- <template #search="{treeData}">
                    <el-input placeholder="输入关键字进行过滤" v-model="treeData.filterText" style="margin-bottom:10px" />
                </template> -->
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ node.label }}</span>
                    </span>
                </template>
            </ChfTree>
        </el-aside>
        <el-main>
            <ChfGrid v-bind="gridConfig" ref="grid" />
        </el-main>
    </el-container>
</template>

<script>
import grid from "@/mixins/grid.js"
import ChfTree from "@/components/chf-tree/index.vue"
import gridConfigFn from "./gridConfigFn.js"
export default {
    components: {
        ChfTree
    },
    mixins: [grid],
    data () {
        return {
            filterText: '',
            name: '',
            gridConfig: gridConfigFn.call(this),
            treeConfig: {
                options: {
                    props: {

                        label: 'name',
                        children: 'zones',
                        isLeaf: 'leaf',
                    },
                    lazy: true,
                    load (node, resolve) {
                        console.log(1);
                        if (node.level === 0) {
                            return resolve([{ name: 'name' }, { name: 'name' }]);
                        }
                        if (node.level > 5) return resolve([]);

                        setTimeout(() => {
                            const data = [{
                                name: '曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰曾杰',
                                leaf: true
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            }, {
                                name: '陆娟'
                            },];
                            resolve(data);
                        }, 500);
                    },
                    ['filter-node-method'] (value, data) {
                        if (!value) return true;
                        return data.name.indexOf(value) !== -1;
                    },
                    // ['show-checkbox']: true,
                    // ['node-key']: "id",
                    // ['render-content']: (h, { node, data, store }) => {
                    //     return (
                    //         <span class="custom-tree-node">
                    //             <span>{node.label}</span>
                    //             <span>
                    //                 <el-button size="mini" type="text" on-click={() => this.append(data)}>Append</el-button>
                    //                 <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>Delete</el-button>
                    //             </span>
                    //         </span>);
                    // }
                },
                events: {
                    ['node-click']: (data) => {
                        if (this.name === data.name) {
                            this.name = ''
                        } else {
                            this.name = data.name
                        }
                        this.$refs.grid.getData();
                    }
                }
            }
        }
    },

    methods: {
        addOrEdit (row) {
            this.$dialog({
                options: {
                    center: true,
                    width: '400px'
                },
                btns: [
                    {
                        submit: true, type: "primary", size: 'mini', content: "确定", click: (options) => {
                            this.$refs.form.submitForm().then(async params => {
                                let interfaceType = 'addTable'
                                if (row) {
                                    interfaceType = 'editTable'
                                }
                                const res = await this.$api[interfaceType](params);
                                res && this.$message({
                                    message: row ? '编辑成功！' : '添加成功！',
                                    type: 'success'
                                });
                                this.$refs.grid.getData();
                                options.dialogVisible = false
                            })
                        }
                    },
                    {
                        content: "取消", size: 'mini', click: (options) => {
                            options.dialogVisible = false
                        }
                    }
                ],
                render: () => {
                    // this.formConfig.details = row || null;
                    // return (
                    //     <ChfForm  {...{ attrs: this.formConfig }} ref="form" />
                    // )
                    return <span>新增</span>
                },
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.el-container {
    height: 100%;
}
.el-aside {
    margin-right: 10px;
    border: 1px solid #ebeef5;
    padding: 10px;
}
.el-main {
    padding: 0;
}
</style>